<template>
  <div>
    <card :bordered="false" dis-hover>
      <Form ref="formInline" inline>
        <FormItem>
          <DatePicker :editable="false" v-model="time" format="yyyy/MM/dd" type="daterange" placeholder="请选择时间段"
            style="width: 200px" @on-change="changeParams">
          </DatePicker>
        </FormItem>
        <FormItem>
          <Select v-width="180" v-model="project_id" placeholder="请选择项目" clearable @on-change="changePro">
            <Option v-for="(item, index) in projectList" :key="item.id" :value="item.id">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Select v-if="weChartList.length" v-width="180" v-model="weChartId" placeholder="请选择客服微信id" clearable
            @on-change="changeParams">
            <Option v-for="(item, index) in weChartList" :key="item.wechatid" :value="item.wechatid">{{ item.wechatno ||
              item.wechatid}}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <div>
        <h3>
          发送时间段
        </h3>
        <ve-histogram :data="list1" :loading="loading1" :data-empty="dataEmpty1" :legend-visible="false"></ve-histogram>
        <h3>
          回复时间段
        </h3>
        <ve-histogram :data="list2" :loading="loading2" :data-empty="dataEmpty2" :legend-visible="false"></ve-histogram>
      </div>
    </card>
  </div>
</template>
<script>
  import 'v-charts/lib/style.css'
  import { getWeChartSendTime, getWeChartReplyTime, getPersonalInfo, getWeChartSelect } from "../../api/TApi/index.js"
  export default {
    data() {
      return {
        projectList: [],
        weChartList: [],
        time: [],
        project_id: "",
        weChartId: "",
        loading1: false,
        loading2: false,
        dataEmpty1: true,
        dataEmpty2: true,
        chartData: {
          columns: ['日期', '数量'],
          rows: [
            { '日期': '1/1', '数量': 1393 },
            { '日期': '1/2', '数量': 3530 },
            { '日期': '1/3', '数量': 2923 },
            { '日期': '1/4', '数量': 1725 },
            { '日期': '1/5', '数量': 3792 },
            { '日期': '1/6', '数量': 4593 }
          ]
        },
        list1: {},
        list2: {}
      }
    },
    computed: {
      // 晒选条件时是否可以发送请求，必须所有条件都选择才可以
      canSendParams() {
        return this.time[0] !== "" && this.time[1] !== "" && this.project_id && this.weChartId
      }
    },
    methods: {
      // 获取图表数据
      changeParams() {
        // 所有条件满足
        if (this.canSendParams) {
          let params = {
            wechatid: this.weChartId,
            project_id: this.project_id,
            start: this.$Date(this.time[0]).format("YYYY-MM-DD"),
            end: this.$Date(this.time[1]).format("YYYY-MM-DD"),
          }
          this._getWeChartSendTime(params)
          this._getWeChartReplyTime(params)
        }
      },
      // 切换项目
      changePro() {
        this.weChartId = ""
        getWeChartSelect({
          project_id: this.project_id
        }).then(res => {
          this.weChartList = res
        })
      },
      // 获取项目
      _getPersonalInfo() {
        getPersonalInfo().then(res => {
          this.projectList = res.project;
        })
      },
      // 客服发送消息时间段
      _getWeChartSendTime(params) {
        this.loading1 = true
        getWeChartSendTime(params).then(res => {
          if (res.list.length) {
            let newArr = []
            for (let i in res.list[0]) {
              newArr.push({
                '日期': i,
                '数量': Number(res.list[0][i])
              });
            }
            this.list1 = {
              columns: ['日期', '数量'],
              rows: newArr
            }
            this.dataEmpty1 = false
          } else {
            this.list1 = {}
            this.dataEmpty1 = true
          }
        }).finally(() => {
          this.loading1 = false
        })
      },
      // 患者回复时间段
      _getWeChartReplyTime(params) {
        this.loading2 = true
        getWeChartReplyTime(params).then(res => {
          if (res.list.length) {
            let newArr = []
            for (let i in res.list[0]) {
              newArr.push({
                '日期': i,
                '数量': Number(res.list[0][i])
              });
            }
            this.list2 = {
              columns: ['日期', '数量'],
              rows: newArr
            }
            this.dataEmpty2 = false
          } else {
            this.list2 = {}
            this.dataEmpty2 = true
          }
        }).finally(() => {
          this.loading2 = false
        })
      },
    },
    created() {
      this._getPersonalInfo()
    }
  }
</script>